import React from 'react';
import PropTypes from 'prop-types';
import { Table, Pagination, Button, Tooltip } from 'antd';
import styles from './../UserManagement/UserList/List.css';

const List = ({ onEditItem, onChange, pagination, dataSource, loading }) => {
    const handleMenuClick = (record) => {
            onEditItem(record)
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'UserName',
            dataIndex: 'username',
            key: 'username'
        }, {
            title: 'Password',
            dataIndex: 'password',
            key: 'password',
        }, {
            title: 'Role',
            dataIndex: 'role',
            key: 'role'
        }, {
            title: 'Operation',
            key: 'operation',
            width: 100,
            render: (record) => (
                <span className={styles.menuBox}>
                    <Tooltip placement="left" title="编辑权限">
                        <Button type="primary" size="small" icon="edit" onClick={()=>handleMenuClick(record)}/>
                    </Tooltip>
                </span>
            ),
        },
    ];

    const tableOptions = {
        columns: columns,
        dataSource,
        loading,
        pagination: false,
        bordered: true,
        size:"small",
        rowKey(record){
            return record.id;
        }
    };

    const pageProps = {
        total: pagination.total,
        current: pagination.current,
        pageSize: 10,
        onChange: onChange
    };

    return (
        <div>
            <Table {...tableOptions} />
            <Pagination className="ant-table-pagination" {...pageProps}/>
        </div>
    )
};

List.propTypes = {
    onDeleteItem: PropTypes.func,
    onEditItem: PropTypes.func,
    location: PropTypes.object,
};

export default List;
